import { fetchDetailAPI } from "@/apis/detail"
import { DetailDataType } from "@/types/detail"
import { NavBar } from "antd-mobile"
import { useEffect, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"

const Detail = () => {
  const navigate = useNavigate()
  const [detail, setDetail] = useState<DetailDataType | null>(null)

  // 获取路由参数
  const [params] = useSearchParams()
  const id = params.get('id')
  useEffect(() => {
    const getDetail = async () => {
      const res = await fetchDetailAPI(id!)
      setDetail(res.data.data)
    }
    getDetail()
  }, [id])

  if(!detail) {
    return <div>this is loading...</div>
  }

  const back = () => {
    navigate(-1)
  }

  return <div>
    <NavBar onBack={back}>{detail?.title}</NavBar>
    <div dangerouslySetInnerHTML={{
      __html: detail?.content
    }}></div>
  </div>
}

export default Detail
